<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch 监控数据</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch 监控数据</h1>
    <pre>
      数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。

      一、看一个监控变化的案例
      温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。

      先来模拟一个温度变化的情况：我们使用按钮来加减温度。
      二、用实例属性写watch监控
有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。


app.$watch('xxx',function(){})
1
app.$watch('xxx',function(){})
还是上边的案例我们改成实例方法的模式。

<textarea name="name" rows="18" cols="80">
app.$watch('temperature',function(newVal,oldVal){
           //要监测的数据             新的值   旧的值 
    if(newVal>=26){
        this.suggestion=suggestion[0];
    }else if(newVal<26 && newVal >=0)
    {
        this.suggestion=suggestion[1];
    }else{
        this.suggestion=suggestion[2];
    }

})
</textarea>
效果和上面是一样的。
  </pre>
<hr>
    <div id="app">
      <p>今天温度:{{wendu}}</p>
      <p>穿衣建议：{{chuanyi}}</p>
      <p>
        <button @click="add">增加温度</button>
        <button @click="reduce">减少温度</button>
      </p>
    </div>
    <script>
    var chuanyi = ["T恤衬衫","夹克长裙","棉衣羽绒服"]
        var app=new Vue({
            el:"#app",
            data:{
              wendu:14,
              chuanyi: "夹克长裙"
            },
            methods:{
              add:function(){
                this.wendu+=5;
              },
              reduce:function(){
                this.wendu-=5;
              }
            },
            watch:{
              wendu:function(newVal,oldVal){
                if (newVal>=26) {
                  this.chuanyi=chuanyi[0]
                }else if (newVal<26 && newVal>0) {
                  this.chuanyi=chuanyi[1]
                }else {
                  this.chuanyi=chuanyi[2]
                }
              }
            }
        })
    </script>
</body>
</html>
